<template>
    <div class="search-container">
        <!-- 搜索框 -->
        <form action="">
            <van-search
                placeholder="搜索关键词"
                v-model="searchText"
                shape="round"
                @search="onSearch"
                @input="isResultShow = false"
            >
                <template #left>
                    <van-icon name="arrow-left" @click="onBack" />
                </template>
                <template #right-icon v-if="searchText">
                    <van-icon name="cross" @click="onCancel" />
                </template>
            </van-search>
        </form>

        <div class="search-body">
            <!-- 搜索结果 -->
            <search-result
                v-if="isResultShow"
                :searchText="searchText"
                :recommendList="[...recommendList,...top100List]"
            ></search-result>

            <!-- 联想搜索建议 -->
            <search-suggestion
                v-else-if="searchText"
                :searchText="searchText"
                @search="onSearch"
                :recommendList="[...recommendList,...top100List]"
            ></search-suggestion>

            <div v-else>
                <!-- 搜索历史 -->
                <search-history
                    v-if="searchHistories.length"
                    :searchHistories="searchHistories"
                    @clearSearchHistories="searchHistories = []"
                    @search="onSearch"
                ></search-history>
                <!-- 热门推荐 -->
                <search-recommend :recommendList="recommendList"></search-recommend>
            </div>
        </div>
    </div>
</template>

<script>
// 引入搜索页面子模块
import SearchHistory from './components/SearchHistory.vue';
import SearchRecommend from './components/SearchRecommend.vue';
import SearchResult from './components/SearchResult.vue';
import SearchSuggestion from './components/SearchSuggestion.vue';

// api
import { getImdbTop100, getAllVideos } from '@/api/feng';

export default {
    components: {
        SearchHistory,
        SearchRecommend,
        SearchResult,
        SearchSuggestion
    },
    data() {
        return {
            type: '',
            isResultShow: false,
            searchText: '',
            searchHistories:
                JSON.parse(localStorage.getItem('IPTV_SEARCH_HISTORY')) || [],
            recommendList: [],
            movieList: [],
            top100List: []
        };
    },
    created() {
        this.getRecommendList();
        this.getTop100()
    },
    methods: {
        // 搜索框的取消事件
        onCancel() {
            this.searchText = '';
            this.isResultShow = false;
        },

        // 搜索事件
        onSearch(val) {
            this.searchText = val;

            // 存储搜索历史
            const index = this.searchHistories.indexOf(val);
            // 若为重复的搜索, 更新到最前
            if (index !== -1) {
                this.searchHistories.splice(index, 1);
            }
            this.searchHistories.unshift(val);
            this.isResultShow = true;
        },

        // 搜索栏左侧返回按钮
        onBack() {
            // 判断 如果当前是在结果页或搜索框有内容 则第一次点击清空内容并回到搜索首页
            // 在搜索首页时点击才进行路由跳转返回
            if (this.isResultShow || this.searchText) {
                this.isResultShow = false;
                this.searchText = '';
            } else {
                this.$router.back();
            }
        },

        // 获取电影列表
        async getRecommendList() {
            const { data } = await getAllVideos();
            this.recommendList = data
            console.log(this.recommendList);
        },

        // 获取imdbtop100榜单
        async getTop100() {
            const { items } = await getImdbTop100()
            this.top100List = items
        }
    },
    watch: {
        // 监听搜索历史 进行本地存储
        searchHistories(value) {
            localStorage.setItem('IPTV_SEARCH_HISTORY', JSON.stringify(value));
        }
    }
};
</script>

<style lang="scss" scoped>
.search-container {
    .van-search {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        height: 88px;
        padding: 0 38px 0 20px;
        overflow: hidden;
        .van-search__content {
            margin-left: 28px;
            padding: 0;
            height: 60px;
            border-radius: 60px;
            color: #000;
            background-color: #cecece;
            font-size: 28px;
            .van-field {
                padding: 0;
                padding-left: 26px;
                font-size: 28px;
                line-height: 70px;
                /deep/ .van-field__left-icon {
                    margin-right: 10px;
                }
                /deep/ .van-icon {
                    font-size: 40px;
                }
                /deep/ .van-field__right-icon {
                    margin-right: 16px;
                    padding: 0;
                }
                /deep/ .van-field__body {
                    input::-webkit-input-placeholder {
                        color: #000;
                    }
                }
            }
        }
    }
    .search-body {
        margin-top: 88px;
    }
    .van-icon {
        font-size: 55px;
    }
}
</style>
